<template>
  <el-dialog v-model="visible" :title="title">
    <vxe-table
      ref="tableRef"
      height="200"
      :data="data"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
      }"
    >
      <vxe-column type="seq" width="70"></vxe-column>
      <vxe-column field="chargeItem" title="收费项目" width="240" :edit-render="{}">
        <template #edit="{ row }">
          <el-radio-group v-if="row.editStatus" v-model="row.chargeItem">
            <el-radio v-for="item in ChargeItems" :key="item.key" :value="item.value">{{ item.key }}</el-radio>
          </el-radio-group>
          <span v-else>{{ row.chargeItem }}</span>
        </template>
      </vxe-column>
      <vxe-column field="priceItem" title="收费代码" width="240" :edit-render="{}">
        <template #edit="{ row }">
          <el-input v-model="row.priceItem" />
        </template>
      </vxe-column>
      <vxe-column title="操作" width="100" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="danger" @click="removeItem(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <div class="flex flex-row flex-justify-between">
        <div>
          <el-button @click="addItem">新增</el-button>
          <el-button @click="saveItem">保存</el-button>
        </div>
        <div>
          <el-button @click="refresh">刷新</el-button>
          <el-button @click="visible = false">退出</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { RegisterBaseAPIs, type ClinicTypeSetting, ChargeItems } from '@/api/register/base'
import { ref, watch } from 'vue'
import type { VxeTableInstance } from 'vxe-table'
import { ElMessageBox, ElMessage } from 'element-plus'

const visible = ref(false)
const clinicType = ref('')
const tableRef = ref<VxeTableInstance<ClinicTypeSetting>>()
const data = ref<ClinicTypeSetting[]>([])

/**标题 */
const title = computed(() => {
  let value = '号别费用设置'
  if (!(clinicType.value === '' || clinicType.value === undefined)) {
    value = `${value}[${clinicType.value}]`
  }

  return value
})

/**窗口显示 */
watch(visible, val => {
  if (val) {
    refresh()
  }
})

/**新增 */
function addItem() {
  const $table = tableRef.value
  if ($table) {
    $table.insert({ editStatus: true })
  }
}

/**保存 */
function saveItem() {
  const $table = tableRef.value
  if ($table) {
    ElMessageBox.confirm('是否保存数据?', '系统提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      ElMessage.success('保存成功')
      refresh()
    })
  }
}

/**删除项目 */
function removeItem(data: ClinicTypeSetting) {
  const $table = tableRef.value
  if ($table) {
    $table.remove(data)
  }
}

/**刷新 */
async function refresh() {
  data.value = await RegisterBaseAPIs.getClinicTypeSetting(clinicType.value)
}

/**显示 */
function display(data: string) {
  visible.value = true
  clinicType.value = data
}

defineExpose({ display })
</script>

<style lang="scss"></style>
